<template>
  <div class="top_o">
    <el-card class="box-card" :style="{height:WindowHeight - cardHeight + 'px'}">
      <el-tabs v-model="activeName">
        <el-tab-pane label="待办" name="first">
          <el-table :max-height="WindowHeight - tabHeight" :data="tableData" style="width:100%" border stripe show-summary :summary-method="getSummaries">
            <el-table-column label="序号" type="index" fixed align="center" width="70" />
            <el-table-column label="借款单号" width="150">
              <template slot-scope="scope">{{ scope.row.boorowood }}</template>
            </el-table-column>
            <el-table-column prop="practicaldanwei" label="借款单位" width="150" />
            <el-table-column prop="practicalbumen" label="借款部门" width="130" />
            <el-table-column prop="username" label="借款人" width="100" />
            <el-table-column prop="jklx" label="借款类型" width="120" />
            <el-table-column prop="price" label="借款金额" align="right" width="110" />
            <el-table-column prop="datatime" label="借款日期" width="130" align="center" />
            <el-table-column prop="statru" label="评审状态" width="110" />
            <el-table-column label="操作" fixed="right" width="170" align="center">
              <el-button size="small" type="info" @click="ShowHuanKuan">查看</el-button>
              <el-button size="small" type="danger" @click="CLHuanKuan">处理</el-button>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="已办" name="second">
          <el-table :max-height="WindowHeight - tabHeight" :data="tableData" style="width:100%" border stripe show-summary :summary-method="getSummaries">
            <el-table-column label="序号" type="index" fixed align="center" width="70" />
            <el-table-column label="借款单号" width="150">
              <template slot-scope="scope">{{ scope.row.boorowood }}</template>
            </el-table-column>
            <el-table-column prop="practicaldanwei" label="借款单位" width="150" />
            <el-table-column prop="practicalbumen" label="借款部门" width="130" />
            <el-table-column prop="username" label="借款人" width="100" />
            <el-table-column prop="jklx" label="借款类型" width="120" />
            <el-table-column prop="price" label="借款金额" align="right" width="130" />
            <el-table-column prop="datatime" label="借款日期" width="130" align="center" />
            <el-table-column prop="statru" label="评审状态" width="110" />
            <el-table-column label="操作" align="center">
              <el-button size="small" type="info" @click="ShowHuanKuan">查看</el-button>
              <!-- <el-button size="small" type="danger" @click="CLHuanKuan">编辑</el-button> -->
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="已完成" name="third">
          <el-table :max-height="WindowHeight - tabHeight" :data="tableData" style="width:100%" border stripe show-summary :summary-method="getSummaries">
            <el-table-column label="序号" type="index" fixed align="center" width="70" />
            <el-table-column label="借款单号" width="150">
              <template slot-scope="scope">{{ scope.row.boorowood }}</template>
            </el-table-column>
            <el-table-column prop="practicaldanwei" label="借款单位" width="150" />
            <el-table-column prop="practicalbumen" label="借款部门" width="130" />
            <el-table-column prop="username" label="借款人" width="100" />
            <el-table-column prop="jklx" label="借款类型" width="120" />
            <el-table-column prop="price" label="借款金额" align="right" width="130" />
            <el-table-column prop="datatime" label="借款日期" width="130" align="center" />
            <el-table-column prop="ywcsp" label="评审状态" width="110" />
            <el-table-column label="操作" align="center">
              <el-button size="small" type="info" @click="ShowHuanKuan">查看</el-button>
              <!-- <el-button type="danger" size="mini" @click="CLHuanKuan">编辑</el-button> -->
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="全部" name="four">
          <el-table :max-height="WindowHeight - tabHeight" :data="tableData" style="width:100%" border stripe show-summary :summary-method="getSummaries">
            <el-table-column label="序号" type="index" fixed align="center" width="70" />
            <el-table-column label="借款单号" width="150">
              <template slot-scope="scope">{{ scope.row.boorowood }}</template>
            </el-table-column>
            <el-table-column prop="practicaldanwei" label="借款单位" width="150" />
            <el-table-column prop="practicalbumen" label="借款部门" width="130" />
            <el-table-column prop="username" label="借款人" width="100" />
            <el-table-column prop="jklx" label="借款类型" width="120" />
            <el-table-column prop="price" label="借款金额" align="right" width="130" />
            <el-table-column prop="datatime" label="借款日期" width="130" align="center" />
            <el-table-column prop="statru" label="评审状态" width="110" />
            <el-table-column label="操作" align="center">
              <el-button size="small" type="info" @click="ShowHuanKuan">查看</el-button>
              <!-- <el-button size="small" type="danger"  @click="CLHuanKuan">编辑</el-button> -->
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
      <div class="bottom"><page /></div>
    </el-card>
    <el-button-group class="BtnAll">
      <div style="display:inline-block">
        <el-row>
          <el-col :span="24">
            <el-form ref="form" :model="form" :inline="true">
              <el-form-item label="年份选择">
                <el-date-picker v-model="form.date1" type="date" placeholder="选择日期" size="mini" />
                <el-button size="small" icon="el-icon-search" />
              </el-form-item>
            </el-form>
          </el-col>
        </el-row>
      </div>
      <el-button size="small" type="primary" @click="newHuanKuan">新增还款</el-button>
    </el-button-group>
    <component :is="configName" />
  </div>
</template>

<script>
import page from '@/views/rfcwgl/components/PageS/index.vue'
import Vue from 'vue'
export default {
  components: { page },
  data() {
    return {
      WindowHeight: document.body.clientHeight,
      // src\views\rfcwgl\huanKuan\append\huanKuanAppend\index.vue
      // src\views\rfcwgl\huanKuan\show\huanKuanShow\index.vue
      configName: '',
      addPath: {
        configName: 'addhuankuan',
        configFilePath: 'rfcwgl/huanKuan/append/huanKuanAppend/index.vue'
      },
      showPath: {
        configName: 'showhuankuan',
        configFilePath: 'rfcwgl/huanKuan/show/huanKuanShow/index.vue'
      },
      chuliPath: {
        configName: 'chulihuankuan',
        configFilePath: 'rfcwgl/components/chuLiYM/caiWuZJYM/index.vue'
      },
      cardHeight: 84,
      tabHeight: 180,
      Ishborrow: false,
      islookover: false,
      islookbj: false,
      activeName: 'first',
      form: {
        date1: ''
      },
      tableData: [
        {
          id: 1,
          boorowood: '212312',
          practicaldanwei: '华电',
          practicalbumen: '财务部',
          username: '张三',
          jklx: '招待费',
          price: '231',
          datatime: '2020-03-12',
          ywcsp: '结束',
          statru: '部门领导'
        },
        {
          id: 2,
          boorowood: '343233',
          practicaldanwei: '华电',
          practicalbumen: '财务部',
          username: '张三',
          jklx: '出差工作',
          price: '4534',
          datatime: '2020-04-02',
          ywcsp: '结束',
          statru: '公司领导'
        },
        {
          id: 3,
          boorowood: '3423432',
          practicaldanwei: '华电',
          practicalbumen: '财务部',
          username: '张三',
          jklx: '招待费',
          price: '3432',
          datatime: '2020-05-04',
          ywcsp: '结束',
          statru: '公司领导'
        }
      ]
    }
  },
  computed: {
    windowHeight() {
      return this.$store.state.windowH.height
    },
    tagsView() {
      return this.$store.state.settings.tagsView
    }
  },
  watch: {
    windowHeight: function(old, newd) {
      this.WindowHeight = old
    },
    tagsView: function(old, newd) {
      this.ifTagsView(old)
    }
  },
  created() {
    this.ifTagsView(this.$store.state.settings.tagsView)
  },
  methods: {
    ifTagsView(data) {
      if (data) {
        this.cardHeight = 84
        this.tabHeight = 180
      } else {
        this.cardHeight = 50
        this.tabHeight = 155
      }
    },

    openWndow(e) {
      this.configName = Vue.component(e.configName, resolve => {
        require([`@/views/${e.configFilePath}`], resolve)
      })
    },
    newHuanKuan() {
      this.openWndow(this.addPath)
    },
    ShowHuanKuan() {
      this.openWndow(this.showPath)
    },
    CLHuanKuan() {
      this.openWndow(this.chuliPath)
    },
    // 合计
    getSummaries(param) {
      const { columns, data } = param
      const sums = []
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '合计'
          return
        }
        const values = data.map(item => Number(item[column.property]))
        if (!values.every(value => isNaN(value))) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr)
            if (!isNaN(value)) {
              return prev + curr
            } else {
              return prev
            }
          }, 0)
          sums[index] += ' 元'
        } else {
          sums[index] = ''
        }
      })

      return sums
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-tabs__header {
  margin: 0px;
}
</style>
